<template>
	<tm-fullView>
		<tm-menubars  title="按钮" color="white" icon-color="black" theme="white" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b ">
				基本示例
			</view>
			<tm-button theme="green" size="xs">特小</tm-button>
			<tm-button theme="indigo" size="s">小</tm-button>
			<tm-button theme="blue" size="m">中</tm-button>
			<tm-button  theme="pink" size="n">标准</tm-button>
			<tm-button theme="red" size="l">较大</tm-button>
			<!-- #ifdef MP-WEIXIN -->
			<tm-button openType="getUserProfile" userProfileError="授权失败" theme="green" size="l">微信授权测试</tm-button>
			<!-- #endif -->
			<tm-button theme="bg-gradient-red-lighten" size="g">大</tm-button>
			<tm-button theme="bg-gradient-primary-accent-b" size="g">大</tm-button>
			<tm-button  theme="bg-gradient-orange-accent" :round="24" block>block</tm-button>
			<view class="py-12"></view>
			<tm-button :loading="true" theme="bg-gradient-indigo-lighten" :round="24"  block>loading</tm-button>
			<view class="py-12"></view>
			<tm-button plan theme="bg-gradient-pink-accent"  :shadow="0">block</tm-button>
			<tm-button text theme="blue"  :shadow="0">block</tm-button>
			<tm-button text theme="white" :shadow="0" >block</tm-button>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b ">
				渐变分为浅和深，方向分为右和下
			</view>
			<tm-button  theme="bg-gradient-orange-accent"  :shadow="0">accent</tm-button>
			<tm-button  theme="bg-gradient-orange-accent-b"  :shadow="0">accent-b</tm-button>
			<tm-button  theme="bg-gradient-orange-lighten"  :shadow="0">lighten</tm-button>
			<tm-button  theme="bg-gradient-orange-lighten-b"  :shadow="0">lighten-b</tm-button>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b ">
				按钮组,可以选择的按钮，点击试下吧。
			</view>
			
			<tm-groupButton activeColor="red" @change="test" :round="6">
				<tm-button  theme="grey" size="s" icon="icon-plus"></tm-button>
				<tm-button  theme="grey" size="s" icon="icon-minus"></tm-button>
				<tm-button theme="grey" size="s" icon="icon-times"></tm-button>
				<tm-button theme="grey" size="s" icon="icon-delete"></tm-button>
			</tm-groupButton>
			
			
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b ">
				fab
			</view>
			<tm-button font-color="color" fab icon="icon-pengyouquan" theme="green" size="xs">n</tm-button>
			<tm-button font-color="color" fab icon="icon-QQ" icon-size="30" theme="bg-gradient-orange-accent" size="s">l</tm-button>
			<tm-button font-color="color" fab icon="icon-weixin" icon-size="45" theme="bg-gradient-indigo-accent" size="m">g</tm-button>
			<tm-button font-color="color" :loading="true" fab icon="icon-pengyouquan" icon-size="60" theme="bg-gradient-green-accent" size="n">n</tm-button>
			<tm-button font-color="color" fab icon="icon-QQ" icon-size="70" theme="bg-gradient-blue-accent" size="l">l</tm-button>
			<tm-button titl fab fontColor="red" icon="icon-weixin" icon-size="90"  size="g">g</tm-button>
		</tm-sheet>
		<view style="height: 80rpx;"></view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmGroupButton from "@/tm-vuetify/components/tm-groupButton/tm-groupButton.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmGroupButton},
		data() {
			return {
				
			}
		},
		methods: {
			test(e){
				console.log(e);
			}
		}
	}
</script>

<style>

</style>
